<template>
    <view>
        <!-- pages/main/index.wxml -->
        <view class="index-banner">
            <swiper :autoplay="true" :circular="true" :indicator-dots="true" interval="2000" indicator-active-color="#fff">
                <swiper-item>
                    <image mode="aspectFill" src="http://lc-LXl0IGlm.cn-n1.lcfile.com/FDYpUNnp1eQA462LHxHS10aeS5enNDCG/banner.png" @tap="handleDail" />
                </swiper-item>
                <swiper-item>
                    <image mode="aspectFill" src="http://lc-LXl0IGlm.cn-n1.lcfile.com/2PYvJwX1mWElxHL7wkR0iuwyLf2mdHgo/5.png" @tap="handleRegion" />
                </swiper-item>
                <swiper-item>
                    <image mode="aspectFill" src="http://lc-LXl0IGlm.cn-n1.lcfile.com/uySblr2A2uVL25W53IdeglxiiMz4jtOm/4.jpg" @tap="handleLearn" />
                </swiper-item>
            </swiper>
            <view class="cu-list grid col-4 banner">
                <view @tap="handleMap" :data-index="index" v-for="(item, index) in iconlist" :key="index">
                    <view :class="'iconfont ' + item.icon"></view>

                    <text class="box magin">{{ item.name }}</text>
                </view>
            </view>
        </view>
        <view class="ipt">
            <van-notice-bar left-icon="volume" text="天空书院功能室预约上线咯！欢迎各位同学围观..." mode="link" color="#19be6b" />
            <text class="back" @tap="handleBack"></text>
        </view>
        <view class="list" @tap="handleDatail" :data-index="index" v-for="(item, index) in tabArr" :key="index">
            <view class="flex">
                <image :src="item.img" mode="" />
                <view class="flex right">
                    <text>{{ item.time }}</text>
                    <text>{{ item.title }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/main/index.js
import { $http } from '../../utils/http';
import fly from '../../utils/request';
export default {
    data() {
        return {
            iconlist: [
                {
                    name: '书院地图',
                    icon: 'icon-ditu'
                },
                {
                    name: '报名',
                    icon: 'icon-renyuanbaoming'
                },
                {
                    name: '预约',
                    icon: 'icon-wodeyuyue'
                },
                {
                    name: '审批',
                    icon: 'icon-shengpi'
                }
            ],
            tabArr: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    async onLoad(options) {
        //自行封装Promise封装
        // $http('/classes/Home').then(res=> {
        //   console.log(res)
        // })
        // 使用第三方库fly发请求
        let homeRes = await fly.get('/classes/Home');
        this.setData({
            tabArr: homeRes.data.results
        });
        fly.get('/classes/Home').then((res) => {
            console.log(res);
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        handleDail() {
            uni.navigateTo({
                url: '/pages/datail/index'
            });
        },

        handleBack() {
            uni.showModal({
                title: '提示',
                content: '天空书院功能预约上线咯！欢迎各位同学围观......'
            });
        },

        handleRegion() {
            uni.navigateTo({
                url: '/pages/region/index'
            });
        },

        handleLearn() {
            uni.navigateTo({
                url: '/pages/learn/index'
            });
        },

        handleDatail(ev) {
            // console.log(ev)
            let { index } = ev.currentTarget.dataset;
            if (index === 0) {
                uni.navigateTo({
                    url: '/pages/datail/index'
                });
            } else if (index === 1 || index === 3) {
                uni.navigateTo({
                    url: '/pages/region/index'
                });
            } else if (index === 2) {
                uni.navigateTo({
                    url: '/pages/learn/index'
                });
            }
        },

        handleMap(ev) {
            let { index } = ev.currentTarget.dataset;
            // console.log(index)
            if (index === 0) {
                uni.navigateTo({
                    url: '/pages/academy_map/index'
                });
            }
        }
    }
};
</script>
<style>
/* pages/main/index.wxss */
page {
    background-color: #f1f1f1;
}
.index-banner {
    width: 750rpx;
    background-color: #fff;
}
swiper {
    width: 740rpx;
    height: 276rpx;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 18rpx;
    box-sizing: border-box;
    transform: translateY(0);
    line-height: 1rpx;
    margin-bottom: 35rpx;
}
image {
    width: 100%;
    height: 100%;
}
.iconfont {
    font-size: 55rpx;
    color: #74b9ff;
}
.banner {
    padding-bottom: 10rpx;
}
.box {
    font-size: 20rpx;
    color: #707070;
}
.grid {
    width: 100%;
    height: 100rpx;
    margin-bottom: 10rpx;
}
.list {
    width: 750rpx;
    height: 256rpx;
    background-color: #fff;
    margin-top: 10rpx;
    padding-top: 28rpx;
    box-sizing: border-box;
}
.list view {
    width: 680rpx;
    height: 200rpx;
    margin: 0 auto;
    background-color: #fafbfc;
    align-items: center;
}
.list image {
    width: 200rpx;
    height: 150rpx;
    margin-right: 25rpx;
    border-radius: 10rpx;
}
.list .right {
    flex-direction: column;
    align-items: baseline;
    padding-top: 30rpx;
    box-sizing: border-box;
}
.ipt {
    position: relative;
}

.back {
    position: absolute;
    right: 10rpx;
    display: block;
    width: 50rpx;
    height: 80rpx;
    top: 0;
}

</style>
